
<meta charset="utf-8">
<style type="text/css">
/* div#rMenu {position:absolute; visibility:hidden; top:0; background-color: #555;text-align: left;padding: 2px;}
div#rMenu ul li{
	margin: 1px 0;
	padding: 0 5px;
	cursor: pointer;
	list-style: none outside none;
	background-color: #DFDFDF;
} */
</style>

<div id="biz_pmpProject_detail_req_conatainer">
	<div class="row">
		<div class="col-lg-3 col-xs-6 ">
				<div class="box" >
				<div class="box-header with-border">
					<button type="button" class="btn btn-block btn-info" v-on:click="createRootReq">创建根节点</button>
				</div>
				<div class="box-body">
			<ul id="requiresZTree"  
					v-ktree="{url:'pmp/service/pub/pmpRequires/loadRequiresZTreeVo',
							 ajaxParam: ajaxParam_(), 
							 onClick:'zTreeOnClick',
							 onRightClick:'zTreeOnRightClick',
							 chkEnable:false,
							 chkStyle:'checkbox'}" 
							 class="ztree">
 			</ul>
				</div>
			</div>

		</div>
		<div class="col-lg-9 col-xs-6 ">
		
			<div class="box" >
				<div class="box-header with-border">
					后台系统-权限管理-权限管理
					
					
					<div class="btn-group " id="pmpProjectTableToolbar" role="group" style="float: right;">
					<button type="button" v-kperms="{perm:''}" class="btn btn-default" v-on:click="addC">
						<i class="glyphicon glyphicon-plus" aria-hidden="true"></i> 需改需求
					</button>

					<button type="button" v-kperms="{perm:''}" class="btn btn-default" v-on:click="addC">
						<i class="glyphicon glyphicon-pencil" aria-hidden="true"></i> 创建任务
					</button>
					
					<button type="button" v-kperms="{perm:''}" class="btn btn-default" v-on:click="addC">
						<i class="glyphicon glyphicon-user" aria-hidden="true"></i> 提交bug
					</button>
				</div>
				
				</div>
				<div class="box-body">
					   <div class="nav-tabs-custom">
				            <ul class="nav nav-tabs">
				              <li class="active"><a href="#tab_1" data-toggle="tab">需求详情</a></li>
				              <li><a href="#tab_2" data-toggle="tab">相关任务</a></li>
				              <li><a href="#tab_3" data-toggle="tab">相关bug</a></li>
				              <li class="pull-right"><a href="#" class="text-muted"><i class="fa fa-gear"></i></a></li>
				            </ul>
				            <div class="tab-content">
				              <div class="tab-pane active" id="tab_1">
				                <b>How to use:</b>
				
				                <p>Exactly like the original bootstrap tabs except you should use
				                  the custom wrapper <code>.nav-tabs-custom</code> to achieve this style.</p>
				               
				              </div>
				              <!-- /.tab-pane -->
				              <div class="tab-pane" id="tab_2">
				                The European languages are members of the same family. Their separate existence is a myth.
				               
				              </div>
				              <!-- /.tab-pane -->
				              <div class="tab-pane" id="tab_3">
				                Lorem Ipsum is simply dummy text of the printing and typesetting industry.
				               
				              </div>
				              <!-- /.tab-pane -->
				            </div>
				            <!-- /.tab-content -->
         		</div>
				</div>
			</div>
			
		</div>
	</div>

</div>
<script>

var vm=new Vue({  
	  el: '#biz_pmpProject_detail_req_conatainer',
	  data:{
		  projectId: null,
		  searchForm:{
			  name: null,
			  pmUserId: null
		 },
		  bus:new Vue(),
	  },
	  mounted:function(){
		  var _this=this;
		_this.initTable();
		
	  },
    methods: {
    	zTreeOnRightClick : function (event, treeId, treeNode) {
    		 var _this=this;
    		 console.log(treeNode)
    		 var nodeType=treeNode.nodeType;
    		 var id=treeNode.id;
    		 var name=treeNode.name
    		 //类型_D#0根模块,1需求，2模块#
    		  var url="";
    		 if("2"==nodeType||"0"==nodeType){
    			 url="/views/pmpRequires/pmpRequires.context.module.html";
    		 }else if("1"==nodeType){
    			 url="/views/pmpRequires/pmpRequires.context.req.html";
    		 }else{
    			 return;
    		 }
    		 zfesLayerEditDg.open(url,{"nodeId":id,"name":name},"",120,function(){});
		},

    	zTreeOnClick: function(event, treeId, treeNode) {
    	  
    	},
    	ajaxParam_: function (){
    		var _this=this;
    		return {"projectId":_this.getId()};
    	},
    	getId: function(){
    	  var curPath=window.document.location.href;
   		  var url = curPath.substring(curPath.lastIndexOf('#')+1, curPath.length);
   		  var id=url.split("=")[1];
   		  this.$data.projectId=id;
   		  return id;
    	},
    	createRootReq: function(){
    		  let　_this=this;
    		  var url="/views/pmpRequires/pmpRequires.root.add.html";
    		  zfesLayerEditDg.open(url,{"projectId":_this.$data.projectId},"根需求编辑",460,function(){});
    	},
    	
  	  initTable:function(){
  		var _this=this;
  		  var columns=[
  					{checkbox:true,width:20},
  					{field:'name',title:'项目名称',width:160},
  					{field:'version_name',title:'项目版本',width:60},
                    {field:'pm_user_name',title:'负责人',width:60},
					{field:'member_count',title:'项目组成员数',width:100},
					{field:'createTime',title:'创建时间',width:100},
					{field:'status',title:'当前状态',width:100,formatter:_this.formatStatus},
					{field:'status',title:'当前状态',width:60,formatter:_this.formatEntry}]; 
  		  var url="/pmp/service/ma/pmpProject/loadPmpProjectDataSet";
    		zfesBstable.laodTable($("#pmpProjectBootstrapTable"),$("#searchForm"),$("#pmpProjectTableToolbar"),url,columns,this.searchForm);
  	  },
  	 addC: function (){
  		zfesRoutie.open("/views/pmpProject/pmpProject.add.html",{"id":12322},"添加",null);
	  },
  	  search:function(){
  		  zfesBstable.reload($("#pmpProjectBootstrapTable")); 
  	  },
  	  refresh:function(){
  		  zfesBstable.refresh($("#pmpProjectBootstrapTable"));
  	  }
  	
   	
   }
});

$(function(){
	setTimeout(function(){ $.fn.zTree.getZTreeObj("requiresZTree").expandAll(true); }, 1000);
	
	
});

</script>


